<template>
    <div class="box">
        <div class="top_header">
            <wd-header title="邀请奖励">
                <span class="iconfont" @click="goback" slot="left">&#xe697;</span>
                <router-link to="/invitelist" slot="right" class="header-title">
                    邀请列表
                </router-link>
            </wd-header>
        </div>
        <p class="title" ref="title">
            <span>我的专属二维码</span>
        </p>
        <div class="content">
           <img :src="imgurl" alt="二维码找不到了">
        </div>
        
        <div class="detail">
            <img src="../../assets/images/content.jpg">
        </div>
        
    </div>
</template>
<script>
export default {
    name: 'invitefriends',
    data() {
        return {
            imgurl: null,
            auth: JSON.parse(localStorage.user),
            url: 'http://www.jydsapp.com/jydsApi/api/h5/common/getUserQRCode'
        }
    },
    created(){
        this.getData()
    },
    methods: {
        goback() {
            this.$router.go(-1)
        },
        getData(){
            let str = `{"userPhone":"${this.auth.user.phoneNum}"}`
            let toast = this.$Toast({
                content: '加载中…',
                iconClass: 'loader',
                autoClose: false
            })
            this.fetch({
                method: 'post',
                url: this.url,
                params: {
                    "paramStr": str
                }
            }).then((data) => {
                let res = data.data
                if (res.code == 200) {
                    toast.close()
                    this.imgurl = JSON.parse(res.data).userUrl
                } else if (res.code == 103) { //五天内未登录 token失效跳转到登陆页面
                    toast.close()
                    localStorage.removeItem('user')
                    this.$Toast({
                        content: '请重新登录'
                    })
                    this.$router.replace('/login')
                } else {
                    toast.close()
                    this.$Toast({
                        content: res.message
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        change(){
            let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
            if(distance > 0){
                this.$refs.title.style.opacity = 0
            }else{
                this.$refs.title.style.opacity = 100
            }
        }
    },
    mounted() {
        window.addEventListener('scroll', this.change)
    }
}
</script>
<style lang="scss" scoped>
.box{ 
    background:#fffced;
}
.top_header{
    position:fixed;
    width: 100%;
    top: 0;
    left: 0;
}
.title{
    margin-top: 1.296296rem;
    padding-top: 10px;
    color: #555;
    position: relative;
    span{
        position: absolute;
        text-align: center;
        left: 50%;
        font-size: 14px;
        transform:translateX(-50%);
    }
}
.content {
    text-align: center;
    background: url(../../assets/images/ewm.jpg) no-repeat;
    background-size: 100%;
    padding: 21.5% 0;
    span{
        font-size: 14px;
    }
    img {
        width: 33%;
    }
}

.detail {
    img {
        width: 100%;
    }
}

</style>
